<template>
  <div class="permission-list-page">
    <div class="filter-bar">
      <el-input v-model="filter.name" placeholder="名称" style="width: 180px; margin-right: 8px;" clearable />
      <el-input v-model="filter.code" placeholder="权限编码" style="width: 180px; margin-right: 8px;" clearable />

      <el-button type="primary" @click="handleFilter" style="margin-right: 8px;">筛选</el-button>
      <el-button @click="resetFilter" style="margin-right: 8px;">重置</el-button>
      <el-button v-if="hasAddPermission" class="ml-auto" type="primary" @click="openForm()">新增权限</el-button>
    </div>

    <el-table
      v-if="filteredPermissions && filteredPermissions.length"
      :data="filteredPermissions"
      border
      style="width: 100%"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="ID" min-width="60" />

      <el-table-column prop="name" label="权限名称" min-width="100">
        <template #default="{ row }">
          {{ row.name }}
        </template>
      </el-table-column>

      <el-table-column prop="code" label="权限编码" min-width="140">
        <template #default="{ row }">
          {{ row.code }}
        </template>
      </el-table-column>

      <el-table-column prop="type" label="类型" min-width="90">
        <template #default="{ row }">
          {{ row.type === 1 ? '菜单权限' : '接口权限' }}
        </template>
      </el-table-column>

      <el-table-column prop="method" label="请求方法" min-width="90">
        <template #default="{ row }">
          <el-tag size="small">{{ row.method }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="path" label="接口路径" min-width="150">
        <template #default="{ row }">
          {{ row.path }}
        </template>
      </el-table-column>


      <el-table-column label="操作" width="180" fixed="right">
        <template #default="{ row }">
          <el-button v-if="hasEditPermission" size="small" @click="openForm(row)">编辑</el-button>
          <el-button v-if="hasDeletePermission" size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <PermissionForm
      v-model="formVisible"
      :form-data="currentFormData"
      @submit="handleFormSubmit"
    />
  </div>
</template>

<script setup>
import {onMounted} from "vue";
import { useFilterActions } from '@/services/useFilterActions'
import { usePermissionFormActions, usePermissionListData } from '@/services/auth/permission/permissionApiService'
import { usePermissionStore } from '@/stores/permissionStore'
import PermissionForm from '@/views/permission/PermissionForm.vue'

const permissionStore = usePermissionStore()

// 权限控制（需要替换为真实权限）
const hasAddPermission = true
const hasEditPermission = true
const hasDeletePermission = true

// 筛选条件
// 定义初始字段和筛选回调
const { filter, handleFilter, resetFilter } = useFilterActions(
    { name: '', component: '' },
    {
      onFilter: () => {},
      onReset: () => {}
    }
)

// 在 setup 中使用
const { filteredPermissions } = usePermissionListData(permissionStore, filter)

// 监听筛选条件变化
onMounted(async () => {
  await refreshPermission()
})
// 获取权限数据并更新 store
async function refreshPermission() {
  await permissionStore.getPermission
}

const { openForm, currentFormData, formVisible, handleFormSubmit, handleDelete  } = usePermissionFormActions({
  onPermissionChange: refreshPermission()
})
</script>


<style scoped>
.ml-auto { margin-left: auto; }
.permission-list-page {
  background: #fff;
  border-radius: 6px;
  padding: 10px;
}
.filter-bar {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>